<template>
    <div class="newsInfo-container">
        <h3 class="title">{{ newsinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间:{{ newsinfo.add_time | dataFormat }}</span>
            <span>点击:{{ newsinfo.click }}次</span>
        </p>
        <hr>
        <div class="content" v-html="newsinfo.content"></div>
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'
    import { Toast } from 'mint-ui'

    export default {
        data(){
            return{
                id: this.$route.params.id,    //将url传递的id值 挂载到data上
                newsinfo: {add_time:'2019-01-22T09:59:28.000Z', click:6 , title:'孙笑川的成名之路', content:'&nbsp;&nbsp;&nbsp;&nbsp;网恋被骗: 孙笑川在秋秋上跟一个名叫“潇潇”的女子秋秋爱，见面之前该女子担心孙笑川骗她，于是要孙笑川先转8000给她才放心见面，孙笑川转钱之后当晚便兴冲冲的跑去双流机场，在一夜等待之后孙笑川才意识到被骗。之后孙笑川贼心不死在与一女子实名制网恋，在牵手之后便被骗去两万。之后被暴走大事件改编成段子全国皆知。<br> &nbsp;&nbsp;&nbsp;&nbsp;打奶奶: 某天孙笑川在直播时，一粉丝在嘚瑟自己是孙笑川的好友，粉丝们看不下去了，纷纷发弹幕要孙笑川删其好友位。孙笑川灵机一动说，给刷火箭就删 。当粉丝刷了火箭时，孙笑川原地翻脸。气及败坏的粉丝便跑到孙笑川家乡的贴吧说他为了五百块钱打奶奶，帖子一发出反响特别好，之后嗨粉们在各大贴吧发帖钓鱼。演变成孙笑川带热诚打奶奶 带行窃预兆打奶奶。<br> &nbsp;&nbsp;&nbsp;&nbsp; 抽象圣经: 孙笑川在直播时 ，弹幕说他自播的时候是司马脸 。孙笑川当场diss粉丝，在长达几分钟的时间内孙笑川向粉丝表演了freestyle 及川剧变脸。在这之后 孙笑川被粉丝评为 成都地下说唱皇帝 NM$L厂牌创始人。这段freestyle被粉丝奉为圣经， 作为其粉丝都应该完整的背出来。 在经历97事件之后抽象工作室彻底倒闭 ，四万阴兵无家可归，于是变把战场转移到了微博，从事带带大师兄变成为了网络背锅侠。某某微博找到了@带带大师兄 ，值得一提的是孙笑川移土转生到老鼠台之后，被粉丝把功德箱都踢翻了，孙笑川的一句“要吃饭的嘛”透露出孙笑川的无奈及一条懒狗的自述。<img src="../src/images/sunxiaochuan.jpg">'}
            }
        },
        created(){ this.getNewsInfo() },
        methods:{
            getNewsInfo(){
                this.$http.get('/api/getnew/' + this.id).then(result => {
                    if(result.body.status ===0 ){
                        this.newsinfo = result.body.message;
                        Toast('加载成功');
                    }else{
                        Toast('加载失败');
                    }
                })
            }
        },
        components:{        //用于注册子组件的节点
            'comment-box':comment
        }
    }
</script>

<style lang="scss">
    .newsInfo-container{
        padding:0 4px ;
        .title{
            font-size:16px;
            text-align: center;
            margin: 15px 0;
            color:lightcoral;
        }
        .content{
            color: #242424;
            font-size:15px;
            img{
                width: 100%;
            }
        }
    }
    .subtitle{
        font-size:14px;
        color:-moz-cellhighlight;
        display:flex;
        justify-content: space-between;
    }
</style>